<template>
  <div class="person">
    <h2>名字:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <h2>装备:{{ person.car.c1 }} - {{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改c1</button>
    <button @click="changeC2">修改c2</button>
    <button @click="changeCar">修改整个car</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from 'vue'
import { walk } from 'vue/compiler-sfc'

//数据
let person = reactive({
  name: '张三',
  age: 20,
  car: {
    c1: '摩托',
    c2: '宝马'
  }
})

function changeName() {
  person.name += "~"
}
function changeAge() {
  person.age += 1
}
function changeC1() {
  person.car.c1 = '摩托罗拉'
}
function changeC2() {
  person.car.c2 = '比亚迪'
}
function changeCar() {
  person.car = { c1: '雅迪', c2: '9号' }
}

//情况四，监视响应式对象的某个属性。且该属性是基本类型的，要写成函数形式
watch(() => { return person.name }, (newVal, oldVal) => {
  console.log('person的name变化了', newVal, oldVal);
})

//这个写法和上面一样
watch(() => person.name, (newVal, oldVal) => {
  console.log('person的name变化了', newVal, oldVal);
})


//监视整个对象
watch(()=>person.car,(newVal,oldVal)=>{
  console.log('car变化了',newVal,oldVal);
})



</script>


<style lang="scss" scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  color: white;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>
